import React, { Component } from 'react'

import { connect } from "react-redux"
import action from '../../../store/action/index.js'
import { withRouter } from 'react-router'

import Banner from '../../../components/banner/banner.js'

import cookies from 'js-cookie'
import axios from "axios"

import Timer from "../../../components/timer.js"

import "./publiclist.less"
class Publiclist extends Component {

  state = {
    listclickindex: 0,// 高量
    shopcarFlag: false,
  }
  render() {
    let { listLift, listright } = this.props
    let { listclickindex } = this.state
    return (
      <div>
        {/* 公共渲染列表页面的数据 */}
        {/* 底部内容 */}
        <div className="list_btm_box">
          {/* 左侧内容 */}
          <div className="list_btm_left" ref={(listleftdom) => { this.listleftdom = listleftdom }}>

            {/* <div className="list_btm_left"> */}
            {/* 判断数据是否存在如果存在直接渲染，如果没有不进行渲染 */}
            {
              listLift.length > 0 ?
                listLift.map((item, index) => {
                  return <div
                    className={`list_btm_left_every ${listclickindex === index ? 'list_btm_every_active' : null}`}
                    onClick={() => { this.clickListBtnEvery(index) }} key={item.type_id}>
                    {item.type_typeMess}
                  </div>
                }) : null
            }
          </div>
          {/* 右侧内容 */}

          <div className="list_btm_right" ref={(listrightdom) => { this.listrightdom = listrightdom }} onTouchMove={() => { this.clickListRight() }}>
            {/* 轮播图 */}
            <div className="list_btm_right_banner">
              <Banner />
            </div>

            {/* 列表 */}
            <div>
              {
                listright.length > 0 ?
                  listright.map((item, index) => {
                    // console.log(item);
                    return <div className={`list_btm_right_every_box`} key={index} >
                      <h3>{item.shop_typeMess}</h3>
                      {
                        item.shop_type.map((shopitem, shopindex) => {
                          return <div className="list_btm_right_every  animate__animated  animate__bounceInRight" key={index + shopindex}>
                            <div className="list_btm_right_every_img">
                              <img src={shopitem.commodity_images[0]} />
                            </div>
                            <div className="list_btm_right_every_cont">
                              <p className="list_btm_right_every_cont_name">{shopitem.commodity_namer}</p>
                              <p className="list_btm_right_every_cont_mess">{shopitem.commodity_mess}</p>
                              <p className="list_btm_right_every_cont_price">
                                <span className="list_btm_right_every_cont_pr"><i>{shopitem.commodity_unitPrice[0]}元</i></span>
                                {
                                  shopitem.stock > 0 ?
                                    <span className="list_btm_right_every_cont_spec" onClick={() => {
                                      this.listJumpDetail(shopitem)
                                      sessionStorage.setItem("shop_id", JSON.stringify(shopitem.commodity_id))
                                      sessionStorage.setItem("shop_img", JSON.stringify(shopitem.commodity_images[1]))
                                    }}>商品详情</span>
                                    : <span className="list_btm_right_every_cont_pan iconfont icon-wodetaocan-zhuangtaiyishoukong" style={{ disabled: true }}></span>
                                }
                              </p>

                            </div>
                          </div>
                        })
                      }
                    </div>
                  }) : null
              }
            </div>
          </div>
          {/* <Car parentWay={{ ...this }}></Car> */}
        </div>

      </div>
    )
  }


  listJumpDetail(item) {
    // 跳转到详情简介首页

    sessionStorage.setItem('shop_router', JSON.stringify(this.props.history.location.pathname))
    this.props.history.push('/itemdetail')
    axios({
      url: "/api/front_end/addHistory",
      method: "post",
      data: {
        commodity_id: item.commodity_id,
        timer: Timer(),
        user_id: cookies.get('user_id')
      }
    }).then(res => {
      // console.log(res);
    })
  }

  // 设置高亮
  // 设置双楼层效果
  clickListBtnEvery = (index) => {
    this.listrightdom.removeEventListener("scroll", this.scrollTop)
    this.setState({ listclickindex: index })
    // 点击左侧导航获取点击位置和右侧内容到浏览器顶部距离 
    let topright = this.listrightdom.children[1].children[index].offsetTop

    this.listrightdom.scrollTo({
      top: topright,
      behavior: "smooth"
    })
  }
  // 右侧楼层效果
  clickListRight = () => {
    this.listrightdom.addEventListener("scroll", this.scrollTop)
  }
  scrollTop = () => {
    [...this.listrightdom.children[1].children].forEach((item, index) => {
      if (this.listrightdom.scrollTop + 60 > item.offsetTop) {
        this.setState({ listclickindex: index })
      }
    })
  }
}

export default connect(state => state.foodf, action.foodf)(withRouter(Publiclist))
